<template>
  <div class="goods-image" v-if="Object.keys(detailInfo).length!==0">
    <!-- 上部文字信息与分割线 -->
    <div class="top">
      <div class="topsquare"></div>
      <div class="topline"></div>
    </div>
    <div class="desc">{{detailInfo.desc}}</div>
    <div class="bottom">
      <div class="bottomline"></div>
       <div class="bottomsquare"></div>
    </div>
    <!-- 商品的图片信息展示 -->
    <div v-for="(item,index) in detailInfo.detailImage " :key="index">
      <div class="info-key">{{item.key}}</div>
      <div class="info-img" >
        <img v-for="(img,index) in item.list" 
            :key="index" :src="img" 
            @load="imgLoad" alt="">
      </div>
      
    </div>
    
  </div>
</template>
<script>
export default {
  name:"DetailGoodsImage",
  data() {
    return {
      count:0,
      imageLength:0,
    }
  },
  props:{
    detailInfo:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  watch:{
    detailInfo(){
      // 用watch监听属性变化
      const objLength=this.detailInfo.detailImage.length;

      for(let i=0; i<objLength; i++){
        this.imageLength+=this.detailInfo.detailImage[i].list.length
      }
      // this.imageLength=this.detailInfo.detailImage[0].list.length;
      
    },
    deep:true,
  },
  methods: {
    imgLoad(){
      this.count ++;
      if(this.count===this.imageLength){
        this.$emit("imageLoadOk");
      }
      
    },
  },
}
</script>
<style scoped>
.white{
  height: 200px;
  width: 100px;
  background-color: pink;

}
.goods-image{
  margin: 0 10px
}
.topsquare,
.bottomsquare
{
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: black;
}
.topline,
.bottomline{

  display: inline-block;
  width: 30%;
  height: 1px;
  background-color: black;
 
}
.bottom{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  
}
.desc{
  font-size: 12px;
  padding: 15px 0;
  color: #666;
}
img{
  width: 100%;
}

</style>